<template>
    <el-menu mode="horizontal" router :default-active="$route.path">
        <el-menu-item v-for="(e, i) in meuns" :index="e.path" :key="i">{{ e.name }}</el-menu-item>
    </el-menu>
    <el-breadcrumb separator-icon="ArrowRight" v-if="!$route.meta.isHideBread">
        <el-breadcrumb-item :to="{ path:'/default' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,i) in $route.meta.breadcrumbs" :key="i">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
        <RouterView></RouterView>
    </div>
</template>

<script>
export default {
    data() {
        return {
            meuns: [
                { name: "默认页面", path: "/default" },
                { name: "单文件组件", path: "/sing" },
                { name: "文件模块", path: "/file" },
                { name: "工程错误和图片资源", path: "/error" },
                { name: "样式处理", path: "/style" },
                { name: "打包操作", path: "/build" },
                { name: "ajax的集成和使用", path: "/ajax" },
                { name: "路由模块", path: "/route" },
                { name: "组合式API", path: "/compapi" },
                { name: "ElementUI使用", path: "/element" },
            ]
        }
    },
}
</script>

<style scoped>
.el-menu {
    position: sticky;
    top: 0px;
    z-index: 6;
    backdrop-filter: saturate(50%) blur(4px);
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 4px 0px #999;
}
.el-breadcrumb{
    padding: 15px 20px;
}
.content {
    padding: 20px;
    margin-bottom: 800px;
}
</style>